<template>
    <div>
        <!--     搜索查询输入框 -->
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-bottom: 0">
            <el-form-item label="店铺名称">
                <el-input v-model="searchForm.branchname" placeholder="请输入店铺名" @input="initdp"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="qkSearch">清空查询</el-button>
            </el-form-item>
        </el-form>
<!--       主页面-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="branchid"
                    label="店铺编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="branchname"
                    label="店铺名"
                    width="80"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="店铺地址"
                    width="80"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="店铺状态"
                    width="80">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        <el-button type="primary"  size="small" style="background-color: #4cae4c;"  v-if="scope.row.status == 1">营业</el-button>
                        <el-button type="success"  size="small" style="background-color:#FF5722;border:#FF5722;"  v-if="scope.row.status == 0">整顿</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="describle"
                    label="店铺描述">
            </el-table-column>
            <el-table-column
                    prop="realname"
                    label="店铺经营人">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" @click="outLibraryGoodsForm(scope.row)">详细信息</el-button>
<!--                    <el-button type="primary" @click="delbranch(scope.row)">删除店铺</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--        //点击详情获取弹窗  -->
        <el-dialog
                title="出库信息"
                :visible.sync="dialogTableVisible"
                style="width: 100%">
            <el-table :data="gridData" max-height="300">
                <el-table-column property="goodsid" label="商品id"></el-table-column>

                <el-table-column  property="goodsUrl" label="商品图" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsUrl" width="50px" height="20px">
                    </template>
                </el-table-column>
                <!--                <el-table-column property="xid" label="出库编号" width="100"></el-table-column>-->
                <el-table-column property="goodsname" label="商品名" width="100"></el-table-column>

                <el-table-column property="descirbe" label="商品描述"></el-table-column>
                <el-table-column property="goodsPrice" label="售价"></el-table-column>

            </el-table>
<!--            <el-pagination-->
<!--                    @size-change="handleSizeChang"-->
<!--                    @current-change="handleCurrentChang"-->
<!--                    :current-page="currentPag"-->
<!--                    :page-sizes="spageSizes"-->
<!--                    :page-size="spageSize"-->
<!--                    layout="total, sizes, prev, pager, next, jumper"-->
<!--                    :total="tota">-->
<!--            </el-pagination>-->
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Branch",
        data(){
            return {
                tableData: [],
                //当前页码
                currentPage: 1,
                pageSizes: [5, 10, 15, 20],
                pageSize: 5,
                total: 0,

                //模糊查询
                searchForm: {},

                //获取弹出层详细信息
                gridData:[],
                //控制详情信息弹出层
                dialogTableVisible:false,
                //订单详情分页---当前页码
                currentPag: 1,
                spageSizes:[5,10,15,20],
                spageSize:5,
                tota:0,
            }
        },
        created() {
            this.initdp();
        },
        methods:{
            //查询所有
            initdp(){
                // http://localhost:7799/branch/br?currentPage=1&pageSize=5
                var that = this;
                console.log("+============")
                console.log(this.searchForm)
                this.$http.post("/branch/backFindAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(function (result){
                    console.log(result)
                    that.tableData = result.data.data.list
                    that.total = result.data.data.total
                })
            },
            //模糊查询操作
            onSearch(){
                this.currentPage = 1;
                this.initdp();
            },
            // 清空模糊查询
            qkSearch(){
                this.searchForm = {}
                this.initdp();
            },
            //分页操作
            handleSizeChange(val) {
                console.log("每页"+ val+"条");
                this.pageSize = val;
                this.initdp();
            },
            handleCurrentChange(val) {
                console.log("当前页:"+val);
                this.currentPage = val;
                this.initdp();
            },
            outLibraryGoodsForm(row){
                this.dialogTableVisible= true;
                console.log(row)

                // http://192.168.1.20:8401/order/order/findOrderByOrderId/"+this.orderId
                this.$http.post("/branch/findGoodsByBranchid",row).then( result =>{
                    console.log(result);
                    this.gridData = result.data.data;
                    // this.tota = result.data.data.total
                })
            },
            //详情信息---分页操作
            handleSizeChang(val) {
                console.log("每页"+ val+"条");
                this.pageSiz = val;

            },
            handleCurrentChang(val) {
                console.log("当前页:"+val);
                this.currentPag = val;

            },
            //通过店铺id删除店铺--删除店铺菜品
            delbranch(row){
                console.log(row)
                this.$http.post("/branch/delbranchUser",row).then(result => {

                })
            }

        }
    }
</script>

<style scoped>

</style>